<template>
  <div>
    <el-container>
      <el-aside style="min-height: 300px;">
        <el-row v-for="(data,index) in list" :key="index">
          <el-col>
            <el-menu
                class="el-menu-demo"
                mode="vertical"
                @select="handleType"
                default-active="0"
                >
              <el-menu-item :index="index.toString()">
                <template slot="title">
                  <span>{{data.hairTypeName}}</span>
                </template>
              </el-menu-item>
            </el-menu>
          </el-col>

        </el-row>
      </el-aside>
      <el-main >
        <el-card v-for="o in projectList" :key="o.hairId">
          <div @click="open(o.hairId)" style="cursor:pointer;">
          <el-descriptions direction="horizontal" :column="2">
            <el-descriptions-item label="健身项目">{{o.hairName}}</el-descriptions-item>
            <el-descriptions-item label="展示">
              <el-image :src="o.hairImg"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="教练类型">{{o.barberTypeName}}</el-descriptions-item>
            <el-descriptions-item label="项目类型">{{o.hairTypeName}}</el-descriptions-item>
            <el-descriptions-item label="价格">
              <el-tag size="small">￥{{o.hairPrice}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="售量">
              <el-tag size="small">{{o.orderCount}}</el-tag>
            </el-descriptions-item>
<!--            <el-descriptions-item label="联系地址">{{o.hairName}}</el-descriptions-item>-->
          </el-descriptions>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "classify",
  data(){
    return{
      list:[],
      hairTypeId:'',
      projectList:[]
    }
  },
  mounted() {
    this.getProjectType();

  },
  methods: {
    open(id){

      this.$router.push({
        // path: 'edit',
        name:'projectDetail',
        params:{id},
      })
      console.log(id)
    },
    async getProjectType(){
      const res=await this.$axios.get('/api/hairType/list');
      this.list=res.data.content
      this.hairTypeId=this.list[0].hairTypeId
      this.getProjectList();
      // console.log(res)
    },
    async getProjectList(){
      const res=await this.$axios.get('/api/project/byHairType/'+this.hairTypeId);
      this.projectList=res.data.content
      // console.log(res)
    },
    handleType(key) {

      this.hairTypeId=this.list[key].hairTypeId
      this.getProjectList()
      console.log(key);
    },
  }
}
</script>

<style scoped lang="less">
.el-card{
  margin: 20px;
}
</style>